<template>
	<view class="body">
		<view class="head">
			<image src="../../static/img/text.png" mode="" class="wheat"></image>
			<image src="../../static/img/human.png" mode="" class="human"></image>

			<!-- 用户卡片 -->
			<view class="card">
				<image src="../../static/img/1.png" mode="" class="avator"></image>
				<text class="userName">
					魂之座
				</text>
				<view class="auth" @tap="jump('STUAuth')">
					<image src="../../static/img/auth.png" mode="" class="authimg"></image>
					<text class="stu">学生认证</text>
				</view>
				<view class="exp">
					当前经验
				</view>
				<view class="expNum">
					<text style="font-weight: bold;">53</text>
					<text>/150</text>
				</view>
				<view class="expProg">
					<progress percent="35.3" activeColor='#000' />
				</view>
				<view class="max">
					MAX
				</view>
			</view>

			<!-- 功能卡片 -->
			<view class="ability">
				<view class="atext">
					我的功能
				</view>
				<view class="abimg">
					<!-- 购物车 -->
					<view class="box1" @tap="jump('ShoppingCar')">
						<image src="../../static/img/购物车.png" mode=""></image>

						<view class="">
							购物车
						</view>
					</view>
					<!-- 门店地址 -->
					<view class="box1" @tap="jump('Addr')">
						<image src="../../static/img/门店地址.png" mode=""></image>

						<view class="">
							门店地址
						</view>
					</view>
					<!-- 关于我们 -->
					<view class="box1" @tap="jump('Our')">
						<image src="../../static/img/关于我们.png" mode=""></image>

						<view class="">
							关于我们
						</view>
					</view>
					<!-- 设置 -->
					<view class="box1" @tap="jump('Setup')">
						<image src="../../static/img/设置.png" mode=""></image>

						<view class="">
							设置
						</view>
					</view>

				</view>
			</view>

			<view class="options">
				<view :class="activeOption==='笔记'?'active':''" @tap="activeOption='笔记'">
					笔记
				</view>
				<view :class="activeOption==='收藏'?'active':''" style="margin-left: 80rpx;" @tap="activeOption='收藏'">
					收藏
				</view>
				<view :class="activeOption==='赞过'?'active':''" style="margin-left: 80rpx;" @tap="activeOption='赞过'">
					赞过
				</view>
			</view>

			<!-- 笔记组件 -->
			<view class="note" v-if="activeOption==='笔记'">
				<note title='123' :arr1='arr1' :arr2='arr2'></note>
				<view class="" v-show="flag" style="text-align: center;margin-bottom: 30rpx;">
					<image src="../../static/img/1.gif" mode="" style="width: 100rpx;height: 100rpx;"></image>
				</view>
				<view class="" v-show="flag2" style="text-align: center;margin-bottom: 30rpx;">
					没有更多了
				</view>
			</view>
		</view>
	</view>




</template>

<script>
	import note from '@/pages/my/note/note.vue'
	// import 
	export default {
		components: {
			note
		},
		data() {
			return {
				activeOption: '笔记',
				lists: [],
				arr1: [],
				arr2: [],
				pages: 1,
				page: 0,
				flag: false,
				flag2: false
			}
		},
		methods: {
			add() {
				console.log(123);
			},
			jump(url) {
				uni.navigateTo({
					url: `/pages/my/${url}/${url}`
				})
			},
			getarr() {
				uni.request({
					url: 'http://47.93.162.7:3000/getarr?pages=' + this.pages,
					success: (res) => {
						this.lists = res.data.data
						this.page = Math.floor(res.data.page / 4)
						console.log(this.lists);
						this.lists.forEach((ele, i) => {
							if (i % 2 === 0) {
								this.arr2.push(ele)
							} else {
								this.arr1.push(ele)
							}
						})
					}
				})
				this.pages += 1
			},
		},
		mounted() {
			this.getarr()
		},
		onReachBottom() {
			if (this.pages <= this.page) {
				this.flag = true
				// console.log(1);
				setTimeout(() => {
					if (this.pages <= this.page) {
						this.getarr()
						this.flag = false
					}
				}, 2000)
			} else {
				this.flag2 = true
				this.flag = false
			}
		},
		onPullDownRefresh(){
			this.getarr()
		}
	}
</script>

<style>
	.body {
		width: 100%;
		height: 100%;
		background-color: #F7F7F7;
	}

	page {
		background-color: #F7F7F7;
	}

	.head {
		width: 100%;
		height: 336rpx;
		background-color: #FFA400;
		position: relative;
		/* z-index: -1; */
	}

	.wheat {
		height: 36rpx;
		width: 256rpx;
		position: absolute;
		left: 197rpx;
		bottom: 154rpx;
	}

	.human {
		width: 276rpx;
		height: 442rpx;
		position: absolute;
		right: 0;
		top: 60rpx;
		z-index: 1;
	}

	.card {
		padding: 30rpx;
		background-color: white;
		height: 297rpx;
		width: 717rpx;
		position: absolute;
		right: 0;
		top: 272rpx;
		z-index: 0;
		box-sizing: border-box;
	}

	.avator {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
	}

	.userName {
		font-size: 28rpx;
		margin-left: 12rpx;
		position: absolute;
		top: 74rpx;
	}

	.auth {
		width: 214rpx;
		height: 56rpx;
		line-height: 56rpx;
		background-color: #FFF1CC;
		position: absolute;
		top: 64rpx;
		font-size: 28rpx;
		right: 228rpx;
		border-radius: 10rpx;
	}

	.authimg {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top: 10rpx;
		left: 24rpx;
	}

	.stu {
		font-size: 28rpx;
		margin-left: 79rpx;
	}

	.exp {
		font-size: 24rpx;
		position: absolute;
		top: 214rpx;

	}

	.expNum {
		position: absolute;
		top: 207rpx;
		left: 161rpx;
	}

	.expProg {
		width: 80%;
		position: absolute;
		top: 258rpx;
	}

	.max {
		font-size: 24rpx;
		position: absolute;
		top: 247rpx;
		right: 27rpx;
	}

	.ability {
		width: 717rpx;
		height: 251rpx;
		position: absolute;
		top: 600rpx;
		right: 0;
		background-color: white;
	}

	.atext {
		margin-top: 30rpx;
		margin-left: 38rpx;
	}

	.abimg {
		margin-top: 40rpx;
		margin-left: 43rpx;
		display: flex;
		justify-content: space-around;
	}

	.abimg image {
		width: 64rpx;
		height: 64rpx;
	}

	.options {
		margin-top: 33rpx;
		margin-left: 212rpx;
		display: flex;
		position: absolute;
		top: 884rpx;
	}

	.active {
		font-weight: bold;
	}

	.note {
		position: absolute;
		top: 953rpx;
		/* left: 34rpx; */
		/* margin-top: 617rpx; */
		margin-left: 34rpx;
	}

	.box1 {
		text-align: center;
	}
</style>